<template>
  <div>
   <el-carousel   direction="horizontal" :autoplay="false"  trigger="click" >
    <el-carousel-item v-for="item in image" :key="item" >
    
          <el-image  :src="item" :preview-src-list="image" class="image" >
           </el-image>
    </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
    props:['image'],
    mounted(){
    }
}
</script>
<style scoped lang="less">

.image{
  width: 100%;
  height: 100%;
}  
::v-deep .el-carousel__container{
    height: 100%;
}
.el-carousel {
    height: 100%;
}
.el-carousel__item {
   height: 100%;
}
::v-deep  .el-carousel__button{
   width: 15px;height: 15px;
   border-radius: 50%;
   background: white;
}
::v-deep  .el-carousel__indicator.el-carousel__indicator--vertical.is-active>button{
  background:#39C2B9;
}
</style>